<%@ page import="bean.DB" %>
<%@ page import="java.sql.*" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 80%;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .cart-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        .cart-table th, .cart-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .cart-table th {
            background-color: #4CAF50;
            color: white;
        }

        .cart-table td img {
            width: 100px;
            height: 100px;
            object-fit: cover;
        }

        .checkout-btn {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }

        .delete-btn {
            background-color: red;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 14px;
            border-radius: 4px;
        }

        .delete-btn:hover {
            background-color: darkred;
        }

        .message {
            font-size: 16px;
            font-weight: bold;
            margin-top: 20px;
        }

        .message.success {
            color: green;
        }

        .message.error {
            color: red;
        }

        /* 新增的取消按钮样式类 */
        .cancel-button {
            width: 80px;
            height: 40px;
            margin-top: 10px;
            margin-left: 10px;
        }
    </style>
</head>
<body>

<%
    // 获取当前用户ID
    String userIdStr = (String) session.getAttribute("userId");
    if (userIdStr == null) {
        response.sendRedirect("login.jsp");
        return;
    }

    // 将 userIdStr 转换为 Integer
    Integer userId = null;
    try {
        userId = Integer.parseInt(userIdStr);
    } catch (NumberFormatException e) {
        response.sendRedirect("login.jsp");
        return;
    }

    // 创建数据库连接
    DB db = new DB();
    String query = "SELECT uc.order_id, p.product_name, uc.quantity, p.star, uc.total_price, uc.order_time, p.image_path ,uc.orders_status " +
            "FROM userorders uc " +
            "JOIN products p ON uc.product_id = p.id " +
            "WHERE uc.user_id = ?";
    ResultSet rs = null;
    try (Connection conn = db.createConn(); PreparedStatement pstmt = conn.prepareStatement(query)) {
        pstmt.setInt(1, userId); // 设置查询参数为用户ID
        rs = pstmt.executeQuery();

        // 时间格式化器
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
%>

<div class="container">

    <h2>我的订单</h2>

    <%
        // 判断是否有数据
        if (!rs.next()) {
    %>
    <p>您的订单是空的。</p>
    <%
    } else {
    %>
    <table class="cart-table">
        <thead>
        <tr>
            <th>商品</th>
            <th>数量</th>
            <th>单价</th>
            <th>单件积分</th>
            <th>总价</th>
            <th>下单时间</th>
            <th>订单状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <%
            // 循环查询结果并显示商品信息
            do {
                String orderStatusText = rs.getString("orders_status");  // 获取订单状态文本
        %>
        <tr>
            <td>
                <img src="<%= rs.getString("image_path") %>" alt="<%= rs.getString("product_name") %>">
                <%= rs.getString("product_name") %>
            </td>
            <td><%= rs.getInt("quantity") %></td>
            <td>¥<%= rs.getDouble("total_price") / rs.getInt("quantity") %></td>
            <td><%= rs.getDouble("star") %></td>
            <td>¥<%= rs.getDouble("total_price") %></td>
            <td><%= sdf.format(rs.getTimestamp("order_time")) %></td>
            <td><%= orderStatusText %></td>
            <td>
                <form action="./deleteOrderServlet" method="post" style="display: inline;">
                    <input type="hidden" name="orderId" value="<%= rs.getInt("order_id") %>">
                    <button type="submit" class="delete-btn">删除</button>
                </form>
            </td>
        </tr>
        <%
            } while (rs.next());
        %>
        </tbody>
    </table>

    <br>
    <%
        } // if (rs.next()) 结束
    %>

    <form>
        <!-- 修改返回按钮的 type 属性为 button -->
        <button class="btn" type="button" onclick="goToAnotherPage()">返回</button>
    </form>

</div>

<%
    } catch (SQLException e) {
        e.printStackTrace();
    } finally {
        // 确保关闭资源
        if (rs != null) {
            try {
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
%>

<%
    String successMessage = request.getParameter("success");
    String errorMessage = request.getParameter("error");
%>
<% if (successMessage != null) { %>
<div class="message success"><%= successMessage %></div>
<% } %>
<% if (errorMessage != null) { %>
<div class="message error"><%= errorMessage %></div>
<% } %>

</body>
<script>
    function goToAnotherPage() {
        //返回主页
        window.location.href = "userinfo.jsp";
    }
</script>
</html>
